<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能  -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 先引入bootstrap文件  bootstrap包含noremoon.css -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <!-- 引入自己的首页css -->
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <title>Ali Baixiu</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <header class="col-md-2">
                <div class="log">
                    <a href="#">
                        <img src="./imges/hed-img.png" alt="" class="hidden-xs">
                        <span class="visible-xs">阿里百秀</span>
                    </a>
                </div>
                <div class="nav">
                    <ul>
                        <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
                        <li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
                        <li><a href="# " class="glyphicon glyphicon-phone">科技潮</a></li>
                        <li><a href="#" class="glyphicon  glyphicon glyphicon-gift">奇趣事</a></li>
                        <li><a href="#" class="glyphicon glyphicon-cutlery">美食节</a></li>
                    </ul>
                </div>
            </header>
            <article class="col-md-7 ">
                <div class="news clearfix">
                    <ul>
                        <li>
                            <div class="swiper mySwiper">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./imges/OIP (1).jpg" alt="">
                                            <p>阿里百秀</p>
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./imges/OIP (1).jpg" alt="">
                                            <p>阿里百秀</p>
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./imges/OIP (1).jpg" alt="">
                                            <p>阿里百秀</p>
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./imges/OIP (1).jpg" alt="">
                                            <p>阿里百秀</p>
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./imges/OIP (1).jpg" alt="">
                                            <p>阿里百秀</p>
                                        </a>
                                    </div>
                                </div>
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>

                        </li>

                        <li>
                            <a href="#">
                                <img src="./imges/OIP (2).jpg" alt="">
                                <p>阿里百秀</p>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="./imges/OIP (3).jpg" alt="">
                                <p>阿里百秀</p>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="./imges/OIP (4).jpg" alt="">
                                <p>阿里百秀</p>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="./imges/OIP (4).jpg" alt="">
                                <p>阿里百秀</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="publish">
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>划分是否卡发放</h3>
                            <p class="text-muted hidden-xs">好UI覅偶是否会</p>
                            <p>发放机阿双方均hi欧卡分开了 发看看是否哈客户卡</p>
                            <p class="text-muted hidden-xs"> 法萨芬实发爱喝酒</p>
                        </div>
                        <div class="col-sm-3">
                            <img src="./imges/OIP (1).jpg" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>划分是否卡发放</h3>
                            <p class="text-muted hidden-xs">好UI覅偶是否会</p>
                            <p>发放机阿双方均hi欧卡分开了 发看看是否哈客户卡</p>
                            <p class="text-muted hidden-xs"> 法萨芬实发爱喝酒</p>
                        </div>
                        <div class="col-sm-3">
                            <img src="./imges/OIP (1).jpg" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>划分是否卡发放</h3>
                            <p class="text-muted hidden-xs">好UI覅偶是否会</p>
                            <p>发放机阿双方均hi欧卡分开了 发看看是否哈客户卡</p>
                            <p class="text-muted hidden-xs"> 法萨芬实发爱喝酒</p>
                        </div>
                        <div class="col-sm-3">
                            <img src="./imges/OIP (1).jpg" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>划分是否卡发放</h3>
                            <p class="text-muted hidden-xs">好UI覅偶是否会</p>
                            <p>发放机阿双方均hi欧卡分开了 发看看是否哈客户卡</p>
                            <p class="text-muted hidden-xs"> 法萨芬实发爱喝酒</p>
                        </div>
                        <div class="col-sm-3">
                            <img src="./imges/OIP (1).jpg" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>划分是否卡发放</h3>
                            <p class="text-muted hidden-xs">好UI覅偶是否会</p>
                            <p>发放机阿双方均hi欧卡分开了 发看看是否哈客户卡</p>
                            <p class="text-muted hidden-xs"> 法萨芬实发爱喝酒</p>
                        </div>
                        <div class="col-sm-3">
                            <img src="./imges/OIP (1).jpg" alt="">
                        </div>
                    </div>
                </div>
            </article>
            <aside class="col-md-3">
                <div class="banner">
                    <a href="#">
                        <img src="./imges/OIP (1).jpg" alt="">
                    </a>
                    <a href="#" class="banner-p">
                        <span class="bg-primary">热搜</span>
                        <h3>欢迎加入中国博客联盟</h3>
                        <p>这里有许许多多发发发发发发事故及时发货按时发空户汇款后即可间啊</p>
                    </a>
                </div>
            </aside>

        </div>
    </div>
    <script src="./js/swiper-bundle.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper(".mySwiper", {
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>
</body>

</html>